<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-登录</title>
    <link rel="stylesheet" href="css/6.3.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div>
        <div class="header">
            <div class="header-box">
                <span class="header-img"></span>
                <span class="header-text1">小米商城</span>
                <span class="header-text2">让每个人都能享受科技的乐趣</span>
            </div>
        </div>
    </div>
        <div class="main">
            <div class="main-width">
                <div class="form">
                    <span>|</span>
                    <p class="login">
                        <span class="active">账号登录</span>
                        <span>扫码登录</span>
                    </p>
                    <div id="tab">
                        <div>
                            <form>
                                <p class="phone">
                                    <input type="text" placeholder="邮箱/手机号/小米账号"/>
                                </p>
                                <p class="password">
                                    <input type="password" placeholder="密码"/>
                                </p>
                                <p class="submit">
                                    <input type="submit" value="登录"/>
                                </p>
                            </form>
                            <p class="register">
                                <span>注册小米账号</span>
                                <span>|</span>
                                <span>忘记密码?</span>
                            </p>
                            <div class="footer">
                                <p class="qita">
                                    <span class="left"></span>
                                    其他方式登录
                                    <span class="right"></span>
                                </p>
                                <div class="AllIcon">
                                    <a href="#" ><span class="one"></span></a>
                                    <a href="#"><span  class="two"></span></a>
                                    <a href="#" ><span class="three"></span></a>
                                    <a href="#" ><span class="four"></span></a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <img src="img/sao.png" alt="">
                            <div>
                                <p>
                                    使用
                                    <span class="xiaomishangc">小米商城</span>
                                    扫一扫
                                </p>
                                <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <script>
                    $(".login span").click(function(){
                        $(this).addClass("active").siblings().removeClass("active");
                        var index = $(this).index();
                        console.log(index);
                        $("#tab").children().eq(index).fadeIn().siblings().fadeOut();
                    })
                    
                       
                </script>
            </div>
            
        </div>
    </div>
    <div>
        <div class="last-one">
            <ul>
                <li>简体</li>
                <li>丨</li>
                <li>繁体</li>
                <li>丨</li>
                <li>Englis</li>
                <li>丨</li>
                <li>常见问题</li>
            </ul>
        </div>
        <div class="last">
            <span>小米公司版权所有-京ICP备10046444-</span>
            <span><img src="img/ghs.png" alt=""></span>
            <span>京公网安备11010802020134号-京ICP证110507号</span>
        </div>
    </div>
</body>
</html>